<template>
  <!--待解决-->
  <view>
    <empty-icon v-if="!dataList.length && loadMoreStatus !== 'loading'"></empty-icon>
    <view v-else>
      <view
          class="flex align-center justify-between bg-E9F8FF br-10 m-lr-20 p-lr-20 mt-30 u-skeleton-fillet"
          v-for="(item) in showDataList"
          :key="item.abnormalId "
          @tap="toHandleError(item.abnormalId )"
      >
        <view class="flex flex1 flex-column fz-32 lh-45 p-tb-25 oh">
          <text class="text-ellipsis">{{item.roomName || '-'}}</text>
          <text class="text-ellipsis">{{item.deviceName || '-'}}</text>
          <text class="color-CCCCCC mt-10">{{item.createTime || '-'}}</text>
        </view>
        <view class="flex w-200 justify-end align-center oh">
          <text v-if="item.type == '2'" class="flex1 color-FF6262 mr-20 fz-32 text-ellipsis text-right">{{item.value}}</text>
          <text v-else-if="item.type == '0'" class="flex1 color-FF6262 mr-20 fz-32 text-ellipsis text-right">{{item.result}}</text>
          <view v-else class="flex1 mr-20 fz-32 text-ellipsis text-right result">
            <text
                v-for="(resultItem, resultIndex) in item.resultArray"
                :key="resultIndex"
                :class="[item.normal.split(',').includes(resultItem) ?'color-19BE6B':'color-FF6262']"
            >
              {{resultItem}}
            </text>
          </view>
          <image class="h-28 w-14" src="@/static/images/common/toPath.png"></image>
        </view>
      </view>
      <u-loadmore class="p-tb-20" :status="loadMoreStatus" @loadmore="loadMore" />
    </view>

  </view>
</template>

<script>
import { abnormalList,abnormalMyTodoList } from "@/api/inspection/abnormal"
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import dayjs from '@/libs/dayjs.min.js'
export default {
  name: "abnormal-list-unDone",
  components: {EmptyIcon},
  data() {
    return {
      dataList: [],
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      loading: false,
      hasNext: true,
      isEngineer: false
    }
  },
  created(){
    this.isEngineer = this.$auth.hasRole('engineer')
    this.getData()
  },
  computed:{
    loadMoreStatus() {
      if (this.loading) return 'loading'
      if (this.dataList.length === this.page.total) return 'nomore'
      return 'loadmore'
    },
    showDataList(){
      return this.dataList.map(item => {
        return {
          ...item,
          createTime: item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD HH:mm') : '-',
          value: `${ item.value || item.value==0 ? parseFloat(item.value) : '-'}${item.unit || ''}`,
          resultArray: item.result ? item.result.split(',') : []
        }
      })
    }
  },
  methods: {
    loadMore() {
      if(this.hasNext){
        this.loading = true
        this.page.pageNum += 1
        this.eitherRequest().then(res => {
          this.hasNext = res.hasNext
          this.dataList = [].concat(this.dataList, res.rows)
          this.page.total = res.total
        }).finally( () => {
          this.loading = false
        })
      }
    },
    toHandleError(id){
      this.$tab.navigateTo(`/pages/work/handle-error?abnormalId=${id}`)
    },
    getData() {
      this.loading = true
      this.eitherRequest().then(res => {
        this.dataList = res.rows
        this.page.total = res.total
        this.hasNext = res.hasNext
      }).finally( () => {
        this.loading = false
      })
    },
    eitherRequest(){
      const params = {
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      }
      if(this.isEngineer){
        return abnormalMyTodoList(params)
      }else{
        params.status = 0
        return abnormalList(params)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.result > text:not(:last-child):after{
  content: ',';
}
</style>
